<template>
  <view class="datetime_picker">
    <slot></slot>
    <u-popup :show="popupShow">
      <view class="popup_content">
        <view class="content_head">
          <div class="head_btn" @click="popupShow = false">取消</div>
          <div class="head_title">{{ title }}</div>
          <div class="head_btn" @click="popupConfirm">确认</div>
        </view>
        <u-line color="#eee" style="padding-top: 24rpx"></u-line>
        <view class="content_date">
          <div :class="this.type === 'start_time' ? 'active' : ''" @click="chooseTime('start_time')">
            <u--input
              v-model="start_time"
              placeholder="未选择"
              border="surround"
              suffixIcon="calendar"
              suffixIconStyle="color: #c0c4cc"
              disabled
              disabledColor="#fff"
              fontSize="28rpx"
              placeholderStyle="font-size:28rpx;color:#ccc"
            ></u--input>
          </div>
          <text>-</text>
          <div :class="this.type === 'end_time' ? 'active' : ''" @click="chooseTime('end_time')">
            <u--input
              v-model="end_time"
              placeholder="未选择"
              border="surround"
              suffixIcon="calendar"
              suffixIconStyle="color: #c0c4cc"
              disabled
              disabledColor="#fff"
              fontSize="28rpx"
              placeholderStyle="font-size:28rpx;color:#ccc"
            ></u--input>
          </div>
        </view>
        <u-datetime-picker
          :show="pickerShow"
          v-model="value"
          :minDate="minDate"
          :maxDate="maxDate"
          mode="date"
          cancelColor="#f45746"
          confirmColor="#f45746"
          @cancel="pickerShow = false"
          @confirm="pickerConfirm"
        ></u-datetime-picker>
      </view>
    </u-popup>
  </view>
</template>

<script>
/**
 * @file 时间选择器
 * @param {string} title picker标题
 * @param {function} callback 回调函数,返回选中数据
 */
import { normalizeDateYmd } from "@/utils/filters";
const MinDate = new Date("1910-01-01T00:00:00").getTime();
const MaxDate = +new Date();
export default {
  data() {
    return {
      popupShow: false,
      pickerShow: false,
      value: MaxDate,
      minDate: MinDate,
      maxDate: MaxDate,
      title: "选择日期",
      start_time: null,
      end_time: null,
      type: null,
      callback: () => {},
    };
  },
  methods: {
    open(value, callback) {
      for (const key in value) this[key] = value[key];
      this.callback = callback;
      this.init();
      this.popupShow = true;
    },
    init() {
      if (this.popupShow) return;
      this.start_time = null;
      this.end_time = null;
      this.type = null;
      this.minDate = MinDate;
      this.maxDate = MaxDate;
    },
    chooseTime(type) {
      if (type === "start_time") {
        this.minDate = MinDate;
      }
      if (type === "end_time") {
        this.maxDate = MaxDate;
      }
      this.pickerShow = true;
      this.type = type;
    },
    pickerConfirm({ value }) {
      this[this.type] = normalizeDateYmd(value);
      if (this.type === "start_time") {
        this.minDate = value;
      }
      if (this.type === "end_time") {
        this.maxDate = value;
      }
      this.pickerShow = false;
    },
    popupConfirm() {
      const value = [this.start_time, this.end_time];
      if (!this.start_time) return uni.$u.toast("请选择开始日期");
      if (!this.end_time) return uni.$u.toast("请选择结束日期");
      this.$emit("confirm", value);
      this.callback(value);
      this.popupShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.datetime_picker {
  flex: 1;
  .popup_content {
    height: 60vh;
    padding: 24rpx 0;
    .content_head {
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      .head_title {
        flex: 1;
        text-align: center;
        font-size: 32rpx;
      }
      .head_btn {
        color: $yyy-secondary-color;
      }
    }
    .content_date {
      padding: 24rpx;
      display: flex;
      align-items: center;
      > text {
        margin: 0 1em;
        color: #c0c4cc;
      }
      .active {
        /deep/.u-input {
          border-color: $yyy-secondary-color !important;
          .uni-input-wrapper {
            color: $yyy-secondary-color;
          }
          .uicon-calendar {
            color: $yyy-secondary-color !important;
          }
        }
      }
    }
  }
}
</style>
